import G6 from '@antv/g6'
import Util from '@antv/g6/es/util'
G6.registerNode('card1', {
  draw(item, group) {
    group.addShape('text', {
      attrs: {
        x: 0,
        y: 65,
        text: item.label,
        textAlign: 'center',
        textBaseline: 'bottom',
        fill: 'black' // 文本颜色
      },
      draggable: true
    })
    const keyShape = group.addShape('circle', {
      attrs: {
        x: 0,
        y: 0,
        r: 44,
        fill: '#f00',
        stroke: '#00f',
        lineWidth: 5,
        opacity: 1
      }
    })
    return keyShape
  },
  intersectBox: 'circle',
  setState(name, value, item) {
    const group = item.getContainer()
    const shape = group.get('children')[1] // 顺序根据 draw 时确定
    if (name === 'selected') {
      if (value) {
        shape.attr('fill', 'green')
      } else {
        shape.attr('fill', 'red')
      }
    }
  }
})
G6.registerNode('card2', {
  draw(item, group) {
    group.addShape('text', {
      attrs: {
        x: 0,
        y: 65,
        text: item.label,
        textAlign: 'center',
        textBaseline: 'bottom',
        fill: 'black' // 文本颜色
      },
      draggable: true
    })
    const keyShape = group.addShape('circle', {
      attrs: {
        x: 0,
        y: 0,
        r: 44,
        fill: '#f00',
        stroke: '#00f',
        lineWidth: 5,
        opacity: 1
      }
    })
    group.addShape('image', {
      attrs: {
        img: '',
        x: -22,
        y: -22,
        width: 44,
        height: 44
      },
      draggable: true
    })
    return keyShape
  },
  intersectBox: 'circle',
  afterDraw(cfg, group) {
    group.get('children')[2].animate((ratio) => {
      const matrix = Util.mat3.create()
      const toMatrix = Util.transform(matrix, [
        ['r', ratio * Math.PI * 2]
      ])
      return {
        matrix: toMatrix
      }
    }, {
      repeat: true,
      duration: 2000,
      easing: 'easeCubic'
    })
    // 执行旋转动画
    group.get('children')[1].animate((ratio) => {
      const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10
      let radius = cfg.size
      if (isNaN(radius)) radius = radius[0]
      // 返回这一帧需要变化的参数集，这里只包含了半径
      return {
        r: radius / 2 + diff
      }
    }, {
      repeat: true,
      duration: 2000,
      easing: 'easeCubic'
    })
  }
})
